import { theme } from '@/assets/customed.project.json';
/*
 * @Author: Leo.wang wanglizhigs@163.com
 * @Date: 2023-12-20 22:47:56
 * @LastEditors: Leo.wang wanglizhigs@163.com
 * @LastEditTime: 2023-12-24 11:09:52
 * @FilePath: /tuberculosis_screening_display_system/src/components/GeneralChart/hooks.ts
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { onMounted, ref, watch, nextTick } from 'vue';
import * as echarts from 'echarts';

import _ from 'lodash';

function createChart(container: HTMLElement, options = {}) {
  const chart = echarts.init(container, 'customed');

  const mergedOptions = _.merge(
    {
      title: {
        textStyle: {
          color: '#fff',
        },
        subtextStyle: {
          color: '#fff',
        },
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        },
      },
      legend: {
        right: '16px',
        textStyle: {
          color: '#fff',
        },
      },
      gird: {
        top: 0,
        right: 0,
        bottom: 0,
        left: 0,
      },
      xAxis: {
        type: 'category',
        axisLabel: {
          interval: 0,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#fff',
          },
        },
        axisTick: {
          show: true,
          lineStyle: {
            color: '#fff',
          },
        },
      },
      yAxis: {
        splitLine: {
          lineStyle: {
            type: 'dashed',
          },
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#fff',
          },
        },
        axisTick: {
          show: true,
          lineStyle: {
            color: '#fff',
          },
        },
      },
      series: [],
    },
    options
  );
  chart.setOption(mergedOptions);
  return chart;
}

export function useGeneralChart(props, context) {
  const containerRef = ref<HTMLElement>();
  let chart: echarts.ECharts;
  onMounted(() => {
    nextTick(() => {
      if (containerRef.value) {
        chart = createChart(containerRef.value, {
          title: {
            text: props.title,
            subtext: props.subTitle,
          },
        });
      }
    });
  });
  watch(
    () => props.data,
    () => {
      const yAxisData = [];
      const seriesData = [];
      props.data.forEach(item => {
        yAxisData.push(item.name);
        seriesData.push(item.count);
      });
      chart.setOption({
        xAxis: {
          data: yAxisData,
        },
        series: [
          {
            type: 'bar',
            name: '临床诊断数',
            data: seriesData,
          },
        ],
      });
    }
  );

  return {
    containerRef,
  };
}

